<template>
  <div class="home-root">
    <div class="video-wrap">
      <video
        class="video-wrap__video"
        src="https://lf3-fe-tos.dailygn.com/obj/g-marketing-act-assets/2023_10_07_10_30_17/______.mp4"
        autoplay
        loop
        muted
      ></video>
    </div>

    <el-menu
      class="home-menu"
      mode="horizontal"
      :default-active="activeIndex"
      @select="handleSelect"
      background-color="transparent"
      text-color="#ffffff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="WelcomePage">欢迎</el-menu-item>
      <el-menu-item index="QuestionBank">题库</el-menu-item>
      <el-menu-item index="AccountPage">我</el-menu-item>
      <el-menu-item index="user" disabled>{{ user }}</el-menu-item>
    </el-menu>

    <div class="home-view-body">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import apiClient from '@/utils/axios'
import { ElMessage } from 'element-plus'

const router = useRouter()

const activeIndex = ref<string>('WelcomePage')

const user = ref<string>('未登录')

const handleSelect = (index: string) => {
  activeIndex.value = index
  if (index === 'WelcomePage') router.push('/home/welcome')
  else if (index === 'QuestionBank') router.push('/home/question')
  else if (index === 'AccountPage') router.push('/home/account')
}

const setNickname = () => {
  if (
    sessionStorage.getItem('isLogin') === '0' &&
    localStorage.getItem('username') !== null &&
    localStorage.getItem('password') !== null
  ) {
    doLogin()
  } else {
    const stored = sessionStorage.getItem('data')
    if (!stored) {
      user.value = '未登录'
      return
    }
    const parsed = JSON.parse(stored)
    user.value = parsed.nickname + ' : ' + parsed.username
  }
}

const doLogin = () => {
  apiClient
    .post('/user/web_login', {
      username: localStorage.getItem('username'),
      password: localStorage.getItem('password'),
    })
    .then((res) => {
      if (res.data.status === 200) {
        sessionStorage.setItem('data', JSON.stringify(res.data.data))
        sessionStorage.setItem('isLogin', '1')
        sessionStorage.setItem('weeks', res.data.data.weeks)
        sessionStorage.setItem('roles', res.data.data.roles)
        sessionStorage.setItem('addPermissions', res.data.data.addPermissions)
        sessionStorage.setItem('queryPermissions', res.data.data.queryPermissions)
        setNickname()
        ElMessage.success(res.data.msg)
      } else {
        ElMessage.error(res.data.msg)
      }
    })
}

onMounted(() => {
  setNickname()
})
</script>

<style scoped>
.video-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #c0e4f3
}

.video-wrap__video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.home-root {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.home-menu {
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.home-view-body {
  flex: 1;
  /* padding: 10px; */
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
</style>